<template>
  <div class="app-container">
    <div>
      <button @click="comName = 'MyLeft'">显示Left</button>
      <button @click="comName = 'MyRight'">显示Right</button>
    </div>
        <div ref="div">{{age}}</div>
    <!-- 使用 component 标签，可以动态的加载组件 -->
    <!-- <component :is="组件名"></component> -->
    <!-- 通过 给 keep-alive 加 include属性，来指定缓存哪些组件 -->
    <!-- 坑点：如果需要缓存多个组件，多个组件用逗号分割，绝对不能加空格 -->
    <keep-alive include="MyRight">
      
      <component :is="comName"></component>
    </keep-alive>
  </div>
</template>

<script>
import MyLeft from '@/components/MyLeft.vue'
import MyRight from '@/components/MyRight.vue'
export default {
  data() {
    return {
      comName: 'MyLeft',
      age:20
    }
  },
  beforeCreate(){
    console.log(this.age);
  },
  created() {
    console.log(this.age);
  },
  beforeMount(){
   console.log( document.querySelector('.app-container'));
  },
  mounted(){
    console.log( document.querySelector('.app-container'));
  },
  beforeUpdate(){
   console.log(this.age,this.$refs.div.innerHTML);
  },
  updated(){
   console.log(this.age,this.$refs.div.innerHTML);
  },
  components: {
    MyLeft,
    MyRight
  }
}
</script>
